<!-- 
	动态组件：公告
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view
        class="dynamic-notice"
        :class="{ mixStyle: isMixSearchBanner }"
        :style="{
            'margin-left': getHeight(data.ArtMarginlr),
            'margin-right': getHeight(data.ArtMarginlr),
            'border-radius': getHeight(data.ArtRadius),
        }">
        <image v-if="data.ArtIcon" class="icon-notice" :src="data.ArtIcon"></image>
        <uni-icons v-else class="icon-notice dynamic-notice-icon" :color="data.ArtIconColor" type="sound"></uni-icons>
        <!-- 竖向滚动 -->
        <view
            v-if="data.ArtShow == 1"
            class="marquee-list"
            :style="{ marginTop: marqueeheight }"
            :class="{ 'animate-up': animateUp }">
            <view v-for="(item, index) in listData" :key="index">
                <text class="notice-text" :style="{ color: data.ArtTxtColor }" @click="click(item)">
                    {{ item.Title }}
                </text>
            </view>
        </view>
        <!-- 横向滚动 -->
        <swiper v-else class="swiper-notice" autoplay circular :disable-touch="true">
            <swiper-item v-for="(item, index) in listData" :key="index">
                <text class="notice-text" :style="{ color: data.ArtTxtColor }" @click="click(item)">
                    {{ item.Title }}
                </text>
            </swiper-item>
        </swiper>
        <uni-icons type="arrowright"></uni-icons>
    </view>
</template>

<script>
import iconSearch from "./icon/icon_search.png"
import { getInfoListByBusinessId } from "@/service/api/siteMessage.js"
import { getHeight } from "./utils/util.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        isMixSearchBanner: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            animate: false,
            timer: null,
            marqueeheight: "",
            animateUp: false,
            listData: [],
        }
    },
    mounted() {
        this.getData()
        this.$emit("loadBack", this.data.index)
    },
    methods: {
        initView() {
            this.marqueeheight = this.listData.length * 88 - 88 + "rpx"
            if (this.timer) {
                this.timer.clearInterval()
                this.timer = null
            }
            this.timer = setInterval(this.scrollAnimate, 3000)
        },
        scrollAnimate() {
            this.animateUp = true
            setTimeout(() => {
                this.listData.push(this.listData[0])
                this.listData.shift()
                this.animateUp = false
            }, 500)
        },
        getIconNotice() {
            return iconSearch
        },
        swiper(e) {},
        click(item) {
            this.$emit("noticeClick", item)
        },
        getData() {
            let param = {
                MessageType: 1,
                pageIndex: 1,
                pageSize: 999,
            }
            let path = `?pageIndex=1&pageSize=999&messageType=1`
            getInfoListByBusinessId(param, path).then((res) => {
                if (res.Data) {
                    this.listData = res.Data
                    if (this.data.ArtShow == 1) {
                        this.initView()
                    }
                }
            })
        },
        getHeight(height) {
            return getHeight(height)
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.dynamic-notice {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $dy-padding-default;
    height: 88rpx;
    overflow: hidden;
    border-top: solid 1rpx #f2f2f2;
    border-bottom: solid 1rpx #f2f2f2;
    background: #ffffff;
    .marquee-list {
        flex: 1;
        text {
            display: block;
            width: 100%;
            height: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            list-style: none;
            line-height: 88rpx;
            font-size: $font-size-28;
        }
    }

    .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-88rpx);
    }
    .swiper-notice {
        height: 88rpx;
        flex: 1;
        display: flex;
        padding: 4rpx 0;
        .notice-text {
            height: 88rpx;
            font-size: $font-size-28;
            flex: 1;
            display: flex;
            align-items: center;
        }
    }
    .icon-notice {
        width: 36rpx;
        height: 36rpx;
        margin-right: 12rpx;
    }
    .dynamic-notice-icon {
        //#ifdef MP
        margin-bottom: 12rpx;
        //#endif
        //#ifdef H5
        margin-bottom: -2rpx;
        //#endif
    }
}
.mixStyle {
    margin: 0 $app-page-padding;
    border-radius: 16rpx;
    margin-bottom: $app-page-padding;
}
</style>
